interface ItemProps {
  name: string;
  isPacked: boolean;
}
function Item({ name, isPacked }: ItemProps) {
  return (
    <li className="item">
      {name} {isPacked && "✅"}
    </li>
  );
}

function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item name="Milk" isPacked={true} />
        <Item name="Eggs" isPacked={true} />
        <Item name="Bread" isPacked={false} />
      </ul>
    </section>
  );
}

export default PackingList;
